<template>
  <div class="categoryManager">
    <hmheader title="栏目管理">
      <span
        slot="left"
        class="iconfont iconjiantou2"
        @click="$router.back()"
      ></span>
    </hmheader>
    <div class="mycategory">
      <h3>点击删除以下频道</h3>
      <div class="categoryList">
        <span
          v-for="(item, index) in addcategoryList"
          :key="item.id"
          @click="removeCategory(item, index)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="morecategory">
      <h3>点击添加以下频道</h3>
      <div class="categoryList">
        <span
          v-for="(item, index) in unaddcategoryList"
          :key="item.id"
          @click="addCategory(item, index)"
          >{{ item.name }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import hmheader from "@/components/hmheader.vue";
import { getCategory } from "@/apis/category.js";
export default {
  components: {
    hmheader,
  },
  data() {
    return {
      categoryList: [], // 用于存储已添加（含关注和头条）
      addcategoryList: [], // 已添加的用于渲染页面
      unaddcategoryList: [], // 未添加的
    };
  },
  async mounted() {
    let res = await getCategory();
    // console.log(this.categoryList);
    // 获取已添加的栏目数据
    if (localStorage.getItem("hmtoutiao_token")) {
      // 登陆了
      if (localStorage.getItem("categoryList")) {
        this.categoryList = [
          ...JSON.parse(localStorage.getItem("categoryList")),
        ];
        this.addcategoryList = [...this.categoryList].splice(2);
      } else {
        this.categoryList = [...this.addcategoryList] = [...res.data.data];
        console.log("===", this.categoryList);
        this.addcategoryList = this.addcategoryList.splice(2);
      }
      if (localStorage.getItem("unaddcategoryList")) {
        this.unaddcategoryList = JSON.parse(
          localStorage.getItem("unaddcategoryList")
        );
      } else {
        this.unaddcategoryList = [];
      }
    } else {
      // console.log("所有栏目列表", res);
      this.categoryList = this.addcategoryList = [...res.data.data];
      this.addcategoryList = this.addcategoryList.splice(2);
      this.unaddcategoryList = [];
    }
  },
  methods: {
    removeCategory(item, index) {
      this.unaddcategoryList.push(item);
      this.categoryList.splice(index + 2, 1);
      console.log(this.categoryList);
      this.addcategoryList.splice(index, 1);
      localStorage.setItem(
        "unaddcategoryList",
        JSON.stringify(this.unaddcategoryList)
      );
      localStorage.setItem("categoryList", JSON.stringify(this.categoryList));
    },
    addCategory(item, index) {
      this.unaddcategoryList.splice(index, 1);
      console.log("==", this.categoryList);
      this.categoryList.push(item);
      this.addcategoryList.push(item);
      console.log(this.categoryList);
      console.log(this.unaddcategoryList);
      localStorage.setItem(
        "unaddcategoryList",
        JSON.stringify(this.unaddcategoryList)
      );
      localStorage.setItem("categoryList", JSON.stringify(this.categoryList));
    },
  },
};
</script>

<style lang="less" scoped>
.mycategory,
.morecategory {
  padding: 10px;
  margin-bottom: 10px;
  h3 {
    padding-bottom: 10px;
    color: #666;
    font-size: 14px;
  }
}
.categoryList {
  display: flex;
  box-sizing: border-box;
  justify-content: flex-start;
  flex-wrap: wrap;
  span {
    display: block;
    width: 21%;
    line-height: 40px;
    border: 1px solid #ccc;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 15px;
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
}
</style>